.checkbox-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 !important;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkbox-group > div {
  display: flex;
}

.checkbox-group > div > label {
  display: flex;
  gap: 0.2rem;
}

.external-link {
  margin-left: 0.5rem;
  position: relative;
  top: 2px;
  color: black;
}

.external-link:hover {
  color: #0000ee;
}

.placeholder-input {
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: black;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
}

.option-label {
  align-items: flex-start;
}

/* 
  We want the focus to be around input and label, in order to achieve this,
  we remove focus from the input and add it to the label (wrapper in this case)
  we then use the :focus-within pseudo class plus native focus styles
  https://css-tricks.com/copy-the-browsers-native-focus-styles/
*/
.option-label:focus-within {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.option-label > input:focus {
  outline: none;
}

/* fixes dark theme conflicting with text color */
html.theme-dark .option-label {
  color: #e5ebf1 !important;
}

.example-container {
  gap: 1rem;
  display: flex;
  flex-direction: column;
}